<template>
  <div>
    <div class="navBox">
      <img :src="themeImg" mode="scaleToFill" class="bancgoundImg" />
      <div class="navText">
        <!-- to do 这个是之前的tab切换的 后面需求又改了 暂时不删 怕又改回来了 -->
        <!-- <div
          class="navClick"
          v-for="(item,index) in navList"
          :key="index"
          @click="navClick(item)"
        >
          <p :class="item.state ? 'true' : 'false'">{{item.label}}</p>
        </div>-->
        <p>通知</p>
      </div>
    </div>
    <div
      class="list"
      v-for="(item,index) in list"
      :key="index"
      @click="inFormClick(item.key)"
    >
      <img :src="item.icon" mode="aspectFit" />
      <div class="cont">
        <span>{{item.title}}</span>
        <p>{{item.cont}}</p>
      </div>
      <div class="date">
        <span>{{item.date}}</span>
        <p v-if="item.messageNum" class="messageHitn">{{item.messageNum}}</p>
        <p v-else class="messageHitnKong"></p>
      </div>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_MESSAGE_MOTIFY_PAGE_API,
  MESAGE_NOTIFY_COUNT_UNREAD
  // FIND_ORDER_NO_INFO,
  // ASSESS_FIND_INFO_API,
  // FIND_SHOP_GOODS_INFO,
  // FIND_STORE_MESSAGE_INFO,
  // FIND_SHOP_REBATE_PAGE
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      list: [
        {
          key: 'ASSESS',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/msg_cptx.png',
          title: '差评提醒',
          cont: '',
          date: '',
          messageNum: 0
        },
        {
          key: 'ORDER',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/msg_ddtx.png',
          title: '订单提醒',
          cont: '',
          date: '',
          messageNum: 0
        },
        {
          key: 'STOCK',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/msg_spkcbz.png',
          title: '库存消息',
          cont: '',
          date: '',
          messageNum: 0
        },
        {
          key: 'SYSTEM',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/msg_xtxx.png',
          title: '系统消息',
          cont: '',
          date: '',
          messageNum: 0
        },
        {
          key: 'REBATE',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/msg_fytx.png',
          title: '返佣提醒',
          cont: '',
          date: '',
          messageNum: 0
        },
        {
          key: 'MESSAGE',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/msg_dxylbzz.png',
          title: '短信消息',
          cont: '',
          date: '',
          messageNum: 0
        },
        {
          key: 'OFFLINE',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/msg_xxsk.png',
          title: '线下收款',
          cont: '',
          date: '',
          messageNum: 0
        }
      ],
      messageList: [],
      navList: [
        {
          label: '通知',
          value: '1',
          state: true
        },
        {
          label: '动态',
          value: '2',
          state: false
        }
      ]
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_msg_title.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_msg_title22.png'
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
    this.getDataOne()
  },
  methods: {
    getDataOne () {
      const vm = this
      vm._findMessageAllNum()
      for (let key in vm.list) {
        vm._findMessageMotifyPageApi(vm.list[key].key)
      }
    },
    _findMessageMotifyPageApi (key) {
      const vm = this
      let params = {
        msgType: key,
        shopId: vm.account.shopId
      }
      FIND_MESSAGE_MOTIFY_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            let { list } = r.data.data
            if (list[0]) {
              vm.list.forEach(_ => {
                if (_.key === list[0].msgType) {
                  _.cont = list[0].content
                  _.date = list[0].createDate.split(' ')[0]
                }
              })
            }
            vm.list.forEach(_ => {
              vm.messageList.forEach(e => {
                if (_.key === e.msgType) {
                  _.messageNum = e.unreadNum
                }
              })
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _findMessageAllNum () {
      const vm = this
      MESAGE_NOTIFY_COUNT_UNREAD(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.messageList = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    inFormClick (key) {
      this.$router.push('/pages/mine/inform/list/main?key=' + key)
    },
    init () {
      const vm = this
      vm.list.forEach(_ => {
        _.messageNum = 0
      })
    },
    navClick (val) {
      const vm = this
      if (val.value === '2') {
        vm.$toast('暂未开放')
        return false
      }
      vm.navList.forEach(_ => {
        _.state = false
        if (val.value === _.value) {
          _.state = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  width: 100%;
  height: 60px;
  position: relative;
  .bancgoundImg {
    width: 100%;
    height: 60px;
    position: absolute;
    z-index: -1;
  }
  .navText {
    display: flex;
    justify-content: center;
    font-size: 16px;
    p {
      color: #fff;
      line-height: 60px;
    }
    div {
      width: 50%;
      height: 85px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        padding: 8px 4px;
      }
      .true {
        color: #fff;
        border-bottom: 2px solid #fff;
      }
      .false {
        color: #b5befe;
        // border-bottom: 1px solid #b5befe;
      }
    }
  }
}

.list {
  width: 95%;
  height: 90px;
  margin: auto;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
  img {
    width: 50px;
    height: 50px;
  }
  .cont {
    height: 50px;
    margin-left: 20px;
    font-size: 14px;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    span {
      font-size: 14px;
    }
    p {
      width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      color: #949494;
    }
  }
  .date {
    height: 50px;
    font-size: 12px;
    line-height: 14px;
    color: #949494;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    // align-items: flex-start;
    // justify-content: center;
    width: 120px;

    .messageHitn {
      font-size: 12px;
      background: #ff1515;
      color: #fff;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      border-radius: 50px;
      text-align: center;
    }
    .messageHitnKong {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
